{% extends "aside/system/base.html" %}
{% load staticfiles %}
{% block custom_tdk %}
    <title>用户管理 - WanFeng</title>
    <meta name="description" content="系统管理控制台">
{% endblock %}

{% block page-title %}用户管理{% endblock %}

{% block app-body %}
<input type="hidden" name="selectedGroupName" id="selectedGroupName" value="0"/>
<div class="app-body-inner">
<div class="row-col">
<div class="white bg b-b">
    <div class="navbar no-radius box-shadow-z1"><a data-toggle="modal" data-target="#subnav" data-ui-modal class="navbar-item pull-left hidden-lg-up"><span class="btn btn-sm btn-icon info"><i class="fa fa-th"></i></span></a> <a data-toggle="modal" data-target="#list" data-ui-modal class="navbar-item pull-left hidden-md-up"><span class="btn btn-sm btn-icon white"><i class="fa fa-list"></i></span></a>
        <p class="pull-right m-t-2"><code>＊为了系统稳定，删除用户的操作不是真的删除，仅禁止用户使用.</code></p>
        <ul class="nav navbar-nav">
            <li class="nav-item"><span class="navbar-item text-md">用户列表</span></li>
            <li class="nav-item"><a class="nav-link text-muted" data-toggle="modal" data-target="#modal-addUser" title="Reply"><span class=""><i class="fa fa-fw fa-plus"></i> <span class="hidden-sm-down">添加用户</span></span></a></li>
        </ul>
    </div>
</div>
<div class="row-row">
    <div class="row-col">
        <div class="col-xs w modal fade aside aside-md b-r" id="subnav">
            <div class="row-col light bg">
                <div class="row-row">
                    <div class="row-body scrollable hover">
                        <div class="row-inner">
                            <div class="navside m-t">
                                <nav class="nav-border b-primary" data-ui-nav>
                                    <ul class="nav">
                                        <li class="active"><a href="#" data-val="0"><span class="nav-label"><b class="label warn rounded">{{ total }}</b></span> <span class="nav-text">全部</span></a></li>
                                        {% for g in groups %}
                                        <li><a href="#" data-val="{{ g.id }}"><span class="nav-label"><b class="label {% cycle 'primary' 'danger' 'accent' 'info' %} rounded">{{ g.user_set.all.count }}</b></span> <span class="nav-text">{{ g.name }}</span></a></li>
                                        {% endfor %}
                                        <li><a href="#" data-val="-1"><span class="nav-label"><b class="label success rounded">{{ ungroup.count }}</b></span> <span class="nav-text">未分组</span></a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="p-a b-t"><a href="#" class="btn btn-xs rounded primary" data-toggle="modal" data-target="#modal-addGroup"><i class="fa fa-plus m-r-xs"></i> 增加分组</a></div>
            </div>
        </div>
        <div class="col-xs modal fade aside aside-sm b-r" id="list">
            <div class="row-col">
                <div class="row-row">
                    <div class="row-col">
                        <div class="col-xs w-40 white bg b-r">
                            <div class="row-col">
                                <div class="row-row">
                                    <div class="row-body scrollable hover">
                                        <div class="row-inner">
                                            <div class="text-center text-sm p-y-sm user-index">
                                                {% for i in idxlist %}
                                                <a href="#" data-val="{{ i|lower }}" class="block {% ifequal idx|lower i %}active text-primary _600{% endifequal %} text-muted text-uppercase">{{ i }}</a>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs">
                            <div class="row-col white bg">
                                <div class="row-row">
                                    <div class="row-body scrollable hover">
                                        <div class="row-inner">
                                            <div class="list" id="user-list" data-ui-list="b-r b-3x b-primary" data-ui-list-target="#detail" data-ui-list-target-class="show">
                                                {% for u in userlist %}
                                                <div class="list-item">
                                                    <div class="list-left"><span class="w-40 avatar text-capitalize circle {% cycle 'light-blue' 'blue-grey' 'brown' 'pink' 'blue' 'cyan' 'indigo' 'green' 'teal' %}" data-val="{{ u.username }}">{% if u.last_name %}{{ u.last_name }}{% else %}{{ u.username|slice:"4" }}{% endif %}</span></div>
                                                    <div class="list-body">
                                                        <div class="pull-right dropdown"><a href="#" data-toggle="dropdown" class="text-muted"><i class="fa fa-fw fa-ellipsis-v"></i></a>
                                                            <div class="dropdown-menu pull-right text-color member-action" role="menu"><a class="dropdown-item editUser" data-val="{{ u.id }}" data-toggle="modal" data-target="#modal-editUser"><i class="fa fa-pencil"></i> 编辑用户</a> <a class="dropdown-item deleteUser" data-toggle="modal" data-target="#modal-deleteUser" data-var="{{ u.id }}"><i class="fa fa-trash"></i> 删除用户</a>

                                                            </div>
                                                        </div>
                                                        <div class="item-title"><a href="#{{ u.id }}" data-val="{{ u.first_name }}" class="_500">{% if u.first_name %}{{ u.first_name }}{% else %}{{ u.username }}{% endif %}</a></div>
                                                        <small class="block text-muted text-ellipsis" data-val="{{ u.email }}">{% if u.email %}{{ u.email }}{% else %}{{ u.username }}{% endif %}</small></div>
                                                </div>
                                            {% endfor %}

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="white bg p-a b-t clearfix">
                    <div class="btn-group pull-right"><a href="#" class="btn btn-xs white circle"><i class="fa fa-fw fa-angle-left"></i></a> <a href="#" class="btn btn-xs white circle"><i class="fa fa-fw fa-angle-right"></i></a></div>
                    <span class="text-sm text-muted">共: <strong id="totalNumber">{{ userlist.count }}</strong></span></div>
            </div>
        </div>
        <div class="col-xs" id="detail">
            <div class="row-col white bg">
                <div class="row-row">
                    <div class="row-body scrollable hover">
                        <div class="row-inner animated fadeInUp">
                            <h4 class="m-b-sm text-md m-t-1 p-l-1">权限分配</h4>
                             <div class="form-group row p-l-1">
                                <label class="col-sm-2 form-control-label">公司管理</label>
                                <div class="col-sm-10 ">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option1" class="has-value">
                                        添加</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option2" class="has-value">
                                        修改</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" class="has-value">
                                        删除</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" class="has-value">
                                        成员管理</label>


                                </div>
                            </div>
                            <div class="form-group row p-l-1">
                                <label class="col-sm-2 form-control-label">店铺管理</label>
                                <div class="col-sm-10 ">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option1" class="has-value">
                                        添加</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option2" class="has-value">
                                        修改</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" class="has-value">
                                        删除</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" class="has-value">
                                        授权用户</label>


                                </div>
                            </div>
                            <div class="form-group row p-l-1">
                                <label class="col-sm-2 form-control-label">用户管理</label>
                                <div class="col-sm-10 ">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option1" class="has-value">
                                        添加</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option2" class="has-value">
                                        修改</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" class="has-value">
                                        删除</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" class="has-value">
                                        权限设置</label>


                                </div>
                            </div>
                            <div class="form-group row p-l-1">
                                <label class="col-sm-2 form-control-label">产品管理</label>
                                <div class="col-sm-10 ">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option1" class="has-value">
                                        添加</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option2" class="has-value">
                                        修改</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" class="has-value">
                                        同步</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" class="has-value">
                                        上架</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" class="has-value">
                                        产品模板管理</label>


                                </div>
                            </div>
                            <div class="form-group row p-l-1">
                                <label class="col-sm-2 form-control-label">采购管理</label>
                                <div class="col-sm-10 ">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option1" class="has-value">
                                        添加</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option2" class="has-value">
                                        修改</label>
                                    <label class="checkbox-inline">
                                        <input type="checkbox" value="option3" class="has-value">
                                        供应商管理</label>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="p-a b-t clearfix">
                    <div class="pull-right"><a href="#" class="btn btn-xs white rounded"><i class="fa fa-save m-r-xs"></i> 保存</a></div>
                    <a href="#" class="btn btn-xs primary rounded"><i class="fa fa-pencil m-r-xs"></i> 编辑</a></div>
            </div>
        </div>
    </div>
</div>
</div>
</div>


<div id="modal-addUser" class="modal black-overlay" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">新增用户 <a data-dismiss="modal" class="pull-right text-muted text-lg p-a-sm m-r-sm">×</a></h5>

            </div>
            <div class="modal-body text-center p-lg m-l-1 m-r-3">
                <form role="form" action="" method="POST" onsubmit="return checkform(this)">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="_addUser"/>
                    <div class="form-group row">
                                    <label for="addUserName" class="col-sm-2 form-control-label">用户名</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="addUserName" name="addUserName" placeholder="用户名">
                                    </div>
                                </div>
                    <div class="form-group row">
                                    <label for="addUserFirstName" class="col-sm-2 form-control-label">姓名</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="addUserFirstName" name="addUserFirstName" placeholder="姓名">
                                    </div>
                                </div>
                    <div class="form-group row">
                                    <label for="addUserEmail" class="col-sm-2 form-control-label">Email</label>
                                    <div class="col-sm-10">
                                        <input type="email" class="form-control" id="addUserEmail" name="addUserEmail" placeholder="电子邮箱">
                                    </div>
                                </div>
                    <div class="form-group row">
                                    <label for="addUserPassword" class="col-sm-2 form-control-label">密码</label>
                                    <div class="col-sm-10">
                                        <input type="password" class="form-control" id="addUserPassword" name="addUserPassword" placeholder="密码">
                                    </div>
                                </div>
                    <div class="form-group row">
                                    <label for="addConfirmPassword" class="col-sm-2 form-control-label">确认密码</label>
                                    <div class="col-sm-10">
                                        <input type="password" class="form-control" id="addConfirmPassword" name="addConfirmPassword" placeholder="重复密码">
                                    </div>
                                </div>
                <div class="form-group row">
                        <label for="addGroupSelect" class="col-sm-2 form-control-label">选择分组</label>
                        <div class="col-sm-10">
                            <select class="form-control c-select" name="addGroupSelect" id="addGroupSelect">
                                {% for g in groups %}
                                <option value="{{ g.id }}">{{ g.name }}</option>
                            {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group row m-t-md">
                        <div class="col-sm-offset-2 col-sm-12">
                            <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn success p-x-md">提交</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>

<div id="modal-editUser" class="modal black-overlay" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑用户 <a data-dismiss="modal" class="pull-right text-muted text-lg p-a-sm m-r-sm">×</a></h5>

            </div>
            <div class="modal-body text-center p-lg m-l-1 m-r-3">
                <form role="form" action="" method="POST" onsubmit="return checkform(this)">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="_editUser"/>
                    <input type="hidden" name="editUserID" id="editUserID" value="0"/>
                    <div class="form-group row">
                                    <label for="editUserName" class="col-sm-2 form-control-label">用户名</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="editUserName" name="editUserName" readonly>
                                    </div>
                                </div>
                    <div class="form-group row">
                                    <label for="editUserFirstName" class="col-sm-2 form-control-label">姓名</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="editUserFirstName" name="editUserFirstName" placeholder="姓名">
                                    </div>
                                </div>
                    <div class="form-group row">
                                    <label for="editUserEmail" class="col-sm-2 form-control-label">Email</label>
                                    <div class="col-sm-10">
                                        <input type="email" class="form-control" id="editUserEmail" name="editUserEmail" placeholder="电子邮箱">
                                    </div>
                                </div>

                <div class="form-group row">
                        <label for="editGroupSelect" class="col-sm-2 form-control-label">选择分组</label>
                        <div class="col-sm-10">
                            <select class="form-control c-select" name="editGroupSelect" id="editGroupSelect">
                                {% for g in groups %}
                                <option value="{{ g.id }}">{{ g.name }}</option>
                            {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group row m-t-md">
                        <div class="col-sm-offset-2 col-sm-12">
                            <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn success p-x-md">提交</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>

<div id="modal-deleteUser" class="modal" data-backdrop="true">
    <div class="row-col h-v">
        <div class="row-cell v-m">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <form role="form" action="" method="POST">
                        {% csrf_token %}
                    <input type="hidden" name="action" value="_delete"/>
                    <input type="hidden" name="deleteUserID" id="deleteUserID" value="0"/>
                    <div class="modal-header">
                        <h5 class="modal-title">删除用户</h5>
                    </div>
                    <div class="modal-body text-center p-lg">
                        <p>您确定要删除<code id="deleteUserName" class=""></code>?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">否</button>
                        <button type="submit" class="btn danger p-x-md" >是</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="modal-removeGroup" class="modal" data-backdrop="true">
    <div class="row-col h-v">
        <div class="row-cell v-m">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <form role="form" action="" method="POST">
                        {% csrf_token %}
                    <input type="hidden" name="action" value="_remove"/>
                    <input type="hidden" name="removeGroupID" id="removeGroupID" value="0"/>
                    <input type="hidden" name="removeUserID" id="removeUserID" value="0"/>
                    <div class="modal-header">
                        <h5 class="modal-title">移除用户</h5>
                    </div>
                    <div class="modal-body text-center p-lg">
                        <p>您确定要将<code id="removeUserName" class=""></code>从<code id="removeGroupName" class=""></code>中移除?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">否</button>
                        <button type="submit" class="btn danger p-x-md" >是</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="modal-addGroup" class="modal black-overlay" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">新增用户组 <a data-dismiss="modal" class="pull-right text-muted text-lg p-a-sm m-r-sm">×</a></h5>

            </div>
            <div class="modal-body text-center p-lg m-l-1 m-r-3">
                <form role="form" action="" method="POST" onsubmit="return checkform(this)">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="_addGroup"/>
                    <div class="form-group row">
                                    <label for="addGroupName" class="col-sm-2 form-control-label">分组名称</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="addGroupName" name="addGroupName" placeholder="分组名称">
                                    </div>
                                </div>
                    <div class="form-group row m-t-md">
                        <div class="col-sm-offset-2 col-sm-12">
                            <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn success p-x-md">提交</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>

{% endblock %}